<template>
  <div class="sample-info-query">
    <!-- 搜索栏部分 -->
    <div class="search-bar">
      <div class="search-title">检测结果</div>

      <!-- 第一行 -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="8">
          <el-form-item label="检测日期" class="form-item">
            <el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目名称" class="form-item">
            <el-select
                v-model="searchForm.projectName"
                placeholder="请选择项目名称"
                clearable
            >
              <el-option
                  v-for="item in projectNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="检测人员" class="form-item">
            <el-input v-model="searchForm.testPerson"  placeholder="请输入检测人员"/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="5">
          <el-form-item label="被检单位" class="form-item">
            <el-select
                v-model="searchForm.inspectionUnit"
                placeholder="请选择被检单位"
                clearable
            >
              <el-option
                  v-for="item in inspectionUnitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="检测结果" class="form-item">
            <el-select
                v-model="searchForm.testResult"
                placeholder="请选择检测结果"
                clearable
            >
              <el-option
                  v-for="item in testResultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" class="search-buttons">
          <el-button type="primary" @click="handleSearch" :loading="loading.search">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset" :loading="loading.reset">
            <el-icon>
              <Refresh/>
            </el-icon>
            重置
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 新增今日统计模块 -->
    <div class="stats-panel">
      <div class="stats-container">
        <!-- 今日检测总数 -->
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">今日检测总数</div>
            <div class="stat-trend" :class="{'up': todayStats.totalTrend  === 'up', 'down': todayStats.totalTrend  === 'down'}">
              <el-icon v-if="todayStats.totalTrend  === 'up'"><Top /></el-icon>
              <el-icon v-else-if="todayStats.totalTrend  === 'down'"><Bottom /></el-icon>
              <span>{{ todayStats.totalChangeRate  }}%</span>
            </div>
          </div>
          <div class="stat-value">{{ todayStats.totalCount  }}</div>
          <div class="stat-compare">较昨日 {{ todayStats.totalChangeCount  > 0 ? '+' : '' }}{{ todayStats.totalChangeCount  }}</div>
        </div>

        <!-- 今日合格率 -->
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">今日合格率</div>
            <div class="stat-trend" :class="{'up': todayStats.qualityTrend  === 'up', 'down': todayStats.qualityTrend  === 'down'}">
              <el-icon v-if="todayStats.qualityTrend  === 'up'"><Top /></el-icon>
              <el-icon v-else-if="todayStats.qualityTrend  === 'down'"><Bottom /></el-icon>
              <span>{{ todayStats.qualityChangeRate  }}%</span>
            </div>
          </div>
          <div class="stat-value">{{ todayStats.qualityRate  }}%</div>
          <div class="stat-compare">较昨日 {{ todayStats.qualityChangeRate  > 0 ? '+' : '' }}{{ todayStats.qualityChangeRate  }}%</div>
        </div>

        <!-- 阳性检测数 -->
        <div class="stat-card warning">
          <div class="stat-header">
            <div class="stat-title">阳性检测数</div>
            <div class="stat-trend" :class="{'up': todayStats.positiveTrend  === 'up', 'down': todayStats.positiveTrend  === 'down'}">
              <el-icon v-if="todayStats.positiveTrend  === 'up'"><Top /></el-icon>
              <el-icon v-else-if="todayStats.positiveTrend  === 'down'"><Bottom /></el-icon>
              <span>{{ todayStats.positiveChangeRate  }}%</span>
            </div>
          </div>
          <div class="stat-value">{{ todayStats.positiveCount  }}</div>
          <div class="stat-compare">较昨日 {{ todayStats.positiveChangeCount  > 0 ? '+' : '' }}{{ todayStats.positiveChangeCount  }}</div>
        </div>

        <!-- 检测项目分布 -->
        <div class="stat-card chart-card">
          <div class="stat-header">
            <div class="stat-title">检测项目分布</div>
          </div>
          <div class="mini-chart">
            <div class="chart-item" v-for="item in todayStats.projectDistribution"  :key="item.name">
              <div class="chart-label">{{ item.name  }}</div>
              <div class="chart-bar">
                <div class="chart-progress" :style="{width: item.percent  + '%'}"></div>
              </div>
              <div class="chart-value">{{ item.count  }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <div class="table-wrapper">
        <el-table
            ref="multipleTable"
            v-loading="loading.table"
            :data="tableData"
            border
            stripe
            highlight-current-row
            style="width: 100%"
            height="100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column prop="projectId" label="检测编号" align="center"/>
          <el-table-column prop="projectName" label="检测项目" align="center"/>
          <el-table-column prop="sampleName" label="样品名称" align="center"/>
          <el-table-column prop="inspectionUnit" label="被检单位" align="center"/>
          <el-table-column prop="testPerson" label="检测人员" align="center"/>
          <el-table-column prop="sampleDate" label="检测时间" align="center"/>
          <el-table-column prop="testResult" label="检测结果" align="center"/>
          <el-table-column label="操作" align="center" width="265">
            <template #default="{row}">
              <div class="action-buttons">
                <el-button type="primary" size="small" @click.stop="showImageDialog(row)">
                  <el-icon>
                    <Picture/>
                  </el-icon>
                  图片
                </el-button>
                <el-button type="primary" size="small" @click.stop="showCertificate(row)">
                  <el-icon>
                    <Document/>
                  </el-icon>
                  合格证
                </el-button>

                <el-button type="primary" size="small" @click.stop="showEditDetail(row)">
                  <el-icon>
                    <Edit/>
                  </el-icon>
                  编辑
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页部分 -->
      <div class="pagination-wrapper">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100, total]"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 图片弹窗 -->
    <ResultPicDialog
        v-model="singlePicDialog.visible"
        :title="singlePicDialog.title"
        :image-data="singlePicDialog.imageData"
        :reading-value="singlePicDialog.currentReadingValue"
        :result="singlePicDialog.currentResult"
    />

    <!-- 编辑弹窗 -->
    <ResultEditDialog
        v-model="showEditDetailDialog"
        :detail-data="currentDetailData"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
  Search,
  Refresh,
  Picture,
  Document,
  Edit,
  Top,
  Bottom
} from '@element-plus/icons-vue';
import ResultPicDialog from "~/layout/components/ResultPicDialog.vue";
import { getUserResults, querySampleSource } from "~/api/results_man.js";
import { getProjectList, querySamplingImgById } from "~/api/projects_man.js";
import { formatDate } from "~/utils/timeUtils.js";
import ResultEditDialog from "~/layout/components/ResultEditDialog.vue";

// 统一管理loading状态
const loading = ref({
  table: false,       // 表格加载状态
  search: false,      // 搜索按钮加载状态
  reset: false,       // 重置按钮加载状态
});

// 图片弹窗相关状态 - 分别管理两个弹窗
const singlePicDialog = ref({
  visible: false,
  title: '',
  imageData: null,
  loading: false,
  currentReadingValue: '',
  currentResult: ''
});

// 搜索表单数据
const searchForm = ref({
  dateRange: [],
  projectName: '',
  testPerson: '',
  testResult: '',
  inspectionUnit: ''
});

// 表格数据
const tableData = ref([]);
const total = ref(0); // 总条数
const pageSize = ref(50); // 默认每页显示条数
const currentPage = ref(1); // 默认当前页码

// 新增今日统计数据
const todayStats = ref({
  totalCount: 0,          // 今日检测总数
  totalChangeCount: 0,    // 较昨日变化数量
  totalChangeRate: 0,     // 较昨日变化率
  totalTrend: 'none',     // 趋势: up/down/none

  qualityRate: 0,         // 今日合格率
  qualityChangeRate: 0,   // 较昨日变化率
  qualityTrend: 'none',   // 趋势: up/down/none

  positiveCount: 0,       // 阳性检测数
  positiveChangeCount: 0, // 较昨日变化数量
  positiveChangeRate: 0,  // 较昨日变化率
  positiveTrend: 'none',  // 趋势: up/down/none

  projectDistribution: [] // 检测项目分布
});

// 选中的行
const multipleSelection = ref([]);

// 检测项目选项
const projectNameOptions = ref([]);

// 检测结果选项
const testResultOptions = ref([
  {value: '阴性', label: '阴性'},
  {value: '阳性', label: '阳性'}
]);

// 被检单位选项
const inspectionUnitOptions = ref([]);

// 编辑相关状态
const showEditDetailDialog = ref(false);
const currentDetailData = ref({});

/**
 * 从原始结果数据构建统计数据
 * @param {Array} results 原始结果数据
 * @returns {Object} 统计数据对象
 */
const buildStatsData = (results) => {
  // 1. 获取今天和昨天的日期字符串（兼容时区）
  const today = new Date();
  today.setHours(0,  0, 0, 0);
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate()  - 1);

  const formatDateKey = (date) => date.toISOString().split('T')[0];

  // 2. 数据分组
  const groupedData = results.reduce((acc,  item) => {
    const itemDate = new Date(item.TestDate);
    itemDate.setHours(0,  0, 0, 0);
    const dateKey = formatDateKey(itemDate);

    // 按日期分组
    if (!acc.dates[dateKey])  {
      acc.dates[dateKey]  = [];
    }
    acc.dates[dateKey].push(item);

    // 按项目分组
    if (!acc.projects[item.ProjectName])  {
      acc.projects[item.ProjectName]  = 0;
    }
    acc.projects[item.ProjectName]++;

    return acc;
  }, { dates: {}, projects: {} });

  // 3. 统计今日数据
  const todayKey = formatDateKey(today);
  const yesterdayKey = formatDateKey(yesterday);

  const todayItems = groupedData.dates[todayKey]  || [];
  const yesterdayItems = groupedData.dates[yesterdayKey]  || [];

  // 4. 计算结果
  const todayTotal = todayItems.length;
  const yesterdayTotal = yesterdayItems.length;

  const todayQualified = todayItems.filter(
      item => item.Quality === '合格'
  ).length;

  const yesterdayQualified = yesterdayItems.filter(
      item => item.Quality === '合格'
  ).length;

  const todayPositive = todayItems.filter(
      item => item.TestResult === '阳性'
  ).length;

  const yesterdayPositive = yesterdayItems.filter(
      item => item.TestResult === '阳性'
  ).length;

  // 5. 处理项目分布（取前4个项目）
  const projectDistribution = Object.entries(groupedData.projects)
      .sort((a, b) => b[1] - a[1]) // 按数量降序
      .slice(0, 4) // 取前4个
      .map(([name, count]) => ({ name, count }));

  // 6. 返回结构化数据
  return {
    todayTotal,
    yesterdayTotal,
    todayQualified,
    yesterdayQualified,
    todayPositive,
    yesterdayPositive,
    projectDistribution
  };
};

// 模拟获取今日统计数据
const fetchTodayStats = async () => {
  try {
    // 这里应该是调用API获取统计数据
    // 前端目前先处理
    let mockData = '';
    const resultsRes = await getUserResults();
    if (resultsRes.code  === 10000) {
      mockData = buildStatsData(resultsRes.data);
      console.log(' 处理后的统计数据:', JSON.stringify(mockData));
    } else {
      // throw new Error('接口返回错误');
      // 返回保底数据
      mockData =  {
        todayTotal: 0,
        yesterdayTotal: 0,
        todayQualified: 0,
        yesterdayQualified: 0,
        todayPositive: 0,
        yesterdayPositive: 0,
        projectDistribution: []
      };
    }

    // 计算总数统计
    todayStats.value.totalCount  = mockData.todayTotal;
    todayStats.value.totalChangeCount  = mockData.todayTotal  - mockData.yesterdayTotal;
    todayStats.value.totalChangeRate  = Math.round((todayStats.value.totalChangeCount  / mockData.yesterdayTotal)  * 100);
    todayStats.value.totalTrend  = todayStats.value.totalChangeCount  > 0 ? 'up' : (todayStats.value.totalChangeCount  < 0 ? 'down' : 'none');

    // 计算合格率统计
    todayStats.value.qualityRate  = Math.round((mockData.todayQualified  / mockData.todayTotal)  * 100);
    const yesterdayQualityRate = Math.round((mockData.yesterdayQualified  / mockData.yesterdayTotal)  * 100);
    todayStats.value.qualityChangeRate  = todayStats.value.qualityRate  - yesterdayQualityRate;
    todayStats.value.qualityTrend  = todayStats.value.qualityChangeRate  > 0 ? 'up' : (todayStats.value.qualityChangeRate  < 0 ? 'down' : 'none');

    // 计算阳性统计
    todayStats.value.positiveCount  = mockData.todayPositive;
    todayStats.value.positiveChangeCount  = mockData.todayPositive  - mockData.yesterdayPositive;
    todayStats.value.positiveChangeRate  = Math.round((todayStats.value.positiveChangeCount  / mockData.yesterdayPositive)  * 100);
    todayStats.value.positiveTrend  = todayStats.value.positiveChangeCount  > 0 ? 'up' : (todayStats.value.positiveChangeCount  < 0 ? 'down' : 'none');

    // 处理项目分布数据
    const totalProjects = mockData.projectDistribution.reduce((sum,  item) => sum + item.count,  0);
    todayStats.value.projectDistribution  = mockData.projectDistribution.map(item  => ({
      ...item,
      percent: Math.round((item.count  / totalProjects) * 100)
    }));

  } catch (error) {
    console.error(' 获取今日统计数据失败:', error);
    ElMessage.error(' 获取今日统计数据失败');
  }
};

// 获取检测项目数据
const fetchProjects = async () => {
  try {
    const projectRes = await getProjectList();

    if (projectRes.code  === 10000) {
      projectNameOptions.value  = projectRes.data.map(item  => (
          {
            label: item.ProjectName,
            value: item.ProjectName
          }
      ));
    } else {
      throw new Error('接口返回错误');
    }

  } catch (error) {
    ElMessage.error(' 获取检测项目数据失败');
  }
};

// 获取被检单位数据
const fetchInspectionUnits = async () => {
  try {
    const type = 1; // 被检单位
    const unitRes = await querySampleSource(type);

    if (unitRes.code  === 10000) {
      inspectionUnitOptions.value  = unitRes.data.map(item  => ({
        label: item.SourceName,
        value: item.SourceName
      }));
    } else {
      throw new Error('接口返回错误');
    }

  } catch (error) {
    console.error(' 获取被检单位失败', error);
    ElMessage.error(' 获取被检单位失败');
  }
};

// 获取表格数据
const fetchTableData = async () => {
  try {
    // 模拟请求参数
    const params = {
      ...searchForm.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };

    const resultsRes = await getUserResults();

    if (resultsRes.code  === 10000) {
      let filteredData = resultsRes.data.map(item  => ({
        projectId: item.TestResultId, // 检测项目Id
        sampleDate: formatDate(item.TestDate), // 检测日期
        projectName: item.ProjectName, // 检测项目
        testPerson: item.TestPerson, // 检测人员

        samplingNumber: item.SamplingCode.String, // 样品编号
        // 点击对应图片按钮先调用样品信息接口得到图片Id再获取图片
        imageUrl: item.RoiId.String,
        certificateImageUrl: '',

        tcValue: item.TcValue, // 检测值
        sampleName: item.SampleName, // 样品名称
        inspectionUnit: item.TestedUnit, // 被检单位
        testUnit: item.TestUnit, // 检测单位

        limits: item.Unit, // 检测限
        standard: item.Standard, // 标准
        quality: item.Quality, // 合格性
        testResult: item.TestResult, // 阴阳性
      }));

      // 筛选
      if (params.dateRange  && params.dateRange.length  === 2) {
        filteredData = filteredData.filter(item  => {
          const date = new Date(item.sampleDate);
          return date >= new Date(params.dateRange[0])  && date <= new Date(params.dateRange[1]);
        });
      }

      // 应用筛选条件
      if (params.projectName)  {
        filteredData = filteredData.filter(item  =>
            item.projectName.includes(params.projectName)
        );
      }
      if (params.testPerson)  {
        filteredData = filteredData.filter(item  =>
            item.testPerson.includes(params.testPerson)
        );
      }
      if (params.testResult)  {
        filteredData = filteredData.filter(item  =>
            item.testResult  === params.testResult
        );
      }
      if (params.inspectionUnit)  {
        filteredData = filteredData.filter(item  =>
            item.inspectionUnit  === params.inspectionUnit
        );
      }

      // 分页处理
      const start = (params.pageNum  - 1) * params.pageSize;
      const end = start + params.pageSize;
      const pageData = filteredData.slice(start,  end);

      tableData.value  = pageData; // 赋值给表格数据
      total.value  = filteredData.length;
    } else {
      throw new Error('接口返回错误');
    }
  } catch (error) {
    console.error(' 获取检测结果列表数据失败', error);
    ElMessage.error(' 获取检测结果列表数据失败');
  }
};

// 监听选中行变化
const handleSelectionChange = (val) => {
  multipleSelection.value  = val;
};

/**
 * 编辑弹窗
 * @param row
 */
const showEditDetail = (row) => {
  currentDetailData.value  = { ...row };
  showEditDetailDialog.value  = true;
}

// 显示图片弹窗 - 图片缓存问题
const showImageDialog = async (row) => {
  try {
    const imgRes = await querySamplingImgById(row.imageUrl);

    if (imgRes.code  === 10000) {
      singlePicDialog.value  = {
        ...singlePicDialog.value,
        title: `检测图片 - ${row.projectId}`,
        currentReadingValue: row.tcValue,
        currentResult: row.testResult,
        imageData: imgRes.data.imgBinary,
        loading: true,
        visible: true
      };

    } else {
      throw new Error('加载图片失败');
    }
  } catch (error) {
    console.error(' 加载图片失败:', error);
    ElMessage.error(' 加载图片失败');
    singlePicDialog.value.imageData  = null;
  } finally {
    singlePicDialog.value.loading  = false;
  }
};

const showCertificate = (row) => {
  ElMessage.info(' 功能开发中');
};

// 搜索操作
const handleSearch = async () => {
  try {
    loading.value.search  = true;
    loading.value.table  = true;
    currentPage.value  = 1;
    await fetchTableData();
    ElMessage.success(' 搜索成功');
  } catch (error) {
    ElMessage.error(' 搜索失败');
  } finally {
    loading.value.search  = false;
    loading.value.table  = false;
  }
};

// 重置操作
const handleReset = async () => {
  try {
    loading.value.reset  = true;
    searchForm.value  = {
      dateRange: [],
      projectName: '',
      testPerson: '',
      testResult: '',
      inspectionUnit: ''
    };
    await handleSearch();
  } finally {
    loading.value.reset  = false;
  }
};

// 分页大小变化
const handleSizeChange = async (val) => {
  try {
    loading.value.table  = true;
    pageSize.value  = val;
    currentPage.value  = 1;
    await fetchTableData();
  } catch (error) {
    ElMessage.error(' 获取数据失败');
  } finally {
    loading.value.table  = false;
  }
};

// 分页切换时触发
const handlePageChange = async (val) => {
  try {
    loading.value.table  = true;
    currentPage.value  = val;
    await fetchTableData();
  } catch (error) {
    ElMessage.error(' 获取数据失败');
  } finally {
    loading.value.table  = false;
  }
};

// 在组件挂载时调用接口获取数据
onMounted(async () => {
  loading.value.table  = true;
  try {
    await Promise.all([
      fetchInspectionUnits(),
      fetchProjects(),
      fetchTableData(),
      fetchTodayStats() // 新增调用
    ]);
  } catch (error) {
    ElMessage.error(' 初始化数据失败');
  } finally {
    loading.value.table  = false;
  }
});
</script>

<style scoped>
.sample-info-query {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}

/* 新增统计面板样式 */
.stats-panel {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 5px;
  border: 1px solid #f0f2f5;
  padding: 20px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card.warning  {
  border-left: 4px solid #f56c6c;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.stat-title {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 4px;
}

.stat-trend.up  {
  color: #67c23a;
}

.stat-trend.down  {
  color: #f56c6c;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.stat-compare {
  font-size: 12px;
  color: #999;
}

/* 迷你图表样式 */
.mini-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.chart-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-label {
  width: 60px;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-bar {
  flex: 1;
  height: 8px;
  background-color: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
}

.chart-progress {
  height: 100%;
  background: linear-gradient(to right, #437ae8, #5a9cf8);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.chart-value {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

.search-bar {
  background-color: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
  border: 1px solid #f0f2f5;
}

.search-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 24px;
  position: relative;
  padding-left: 12px;
}

.search-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 4px;
  background: linear-gradient(to bottom, #437ae8, #5a9cf8);
  border-radius: 2px;
}

.search-row {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}

.search-row:last-child {
  margin-bottom: 0;
}

/* 表单项目样式 */
.form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  height: 40px;
}

/* 标签样式调整 */
:deep(.el-form-item__label) {
  padding-right: 12px;
  line-height: 1;
  height: auto;
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
}

/* 表单内容区域 */
:deep(.el-form-item__content) {
  flex: 1;
  display: flex;
  align-items: center;
  line-height: 1;
}

/* 输入框和选择框样式 */
:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e5e6eb;
  transition: all 0.2s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c9cdd4;
}

:deep(.el-input__wrapper.is-focus)  {
  box-shadow: 0 0 0 1px #437ae8 !important;
}

:deep(.el-select .el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e6eb;
}

:deep(.el-select .el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c9cdd4;
}

/* 按钮区域 */
.search-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  gap: 12px;
}

:deep(.el-button) {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.2s;
}

:deep(.el-button--primary) {
  background: linear-gradient(to right, #437ae8, #5a9cf8);
  border: none;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(to right, #3a6bd4, #4e8ae6);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(67, 122, 232, 0.3);
}

:deep(.el-button:not(.el-button--primary)) {
  border: 1px solid #e5e6eb;
  background-color: #fff;
  color: #1d2129;
}

:deep(.el-button:not(.el-button--primary):hover) {
  border-color: #c9cdd4;
  background-color: #f7f8fa;
  color: #1d2129;
}

/* 表格容器 */
.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  border: 1px solid #f0f2f5;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
}

.pagination-wrapper {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f0f2f5;
  background-color: #fff;
}

.action-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
}

/* 表格样式优化 */
:deep(.el-table) {
  --el-table-border-color: #f0f2f5;
  --el-table-border: 1px solid #f0f2f5;
  --el-table-header-bg-color: #f7f8fa;
  --el-table-row-hover-bg-color: #f7f9fc;
  width: 100% !important;
}

:deep(.el-table th) {
  background-color: #f7f8fa;
  color: #1d2129;
  font-weight: 600;
  font-size: 14px;
}

:deep(.el-table td) {
  font-size: 14px;
  color: #4e5969;
}

:deep(.el-table__body tr.current-row  > td) {
  background-color: #f0f7ff;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped  td) {
  background-color: #fafbfc;
}

/* 操作按钮样式 */
:deep(.el-table .cell .el-button) {
  padding: 6px 12px;
  font-size: 13px;
}

/* 日期选择器特殊处理 */
:deep(.el-date-editor.el-input)  {
  width: 100%;
}

:deep(.el-date-editor .el-input__wrapper) {
  border-radius: 8px;
}

/* 弹窗样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f2f5;
  margin-right: 0;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #1d2129;
}

:deep(.el-dialog__body) {
  padding: 24px;
  color: #4e5969;
  line-height: 1.6;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #f0f2f5;
}

/* 分页样式优化 */
:deep(.el-pagination) {
  padding: 0;
}

:deep(.el-pagination.is-background .el-pagination__sizes .el-input .el-input__inner) {
  color: #606266;
}

:deep(.el-pagination.is-background .btn-next),
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .el-pager li) {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e5e6eb;
  min-width: 32px;
  height: 32px;
  margin: 0 4px;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background: linear-gradient(to right, #437ae8, #5a9cf8);
  border-color: transparent;
  color: #fff;
}

/* 图标按钮间距调整 */
:deep(.el-button .el-icon) {
  margin-right: 6px;
}
</style>